<template>
  <div>
    <div>
      <div>&nbsp;</div>
      <div>&nbsp;</div>
      <div>&nbsp;</div>
      <div>&nbsp;</div>

      <div v-for="q in data.questions" :key="q.id">
        <div v-if="q.question_type === 'simple_choice'">
          <FieldPicker
            v-model="q.value.value_suggested"
            :label="`${q.question}:`"
            :options="q.labels"
          />
          <!-- <FieldPicker
            v-model="q.value.value_suggested"
            :label="`${q.question}:`"
            :options="q.labels"
            type="popup"
          /> -->
        </div>

        <div v-else-if="q.question_type === 'multiple_choice'">
          <FieldCheckBox
            v-model="q.value.value_suggested"
            :label="`${q.question}:`"
            :options="q.labels"
          />
          <!-- <FieldCheckBox
            v-model="q.value.value_suggested"
            :label="`${q.question}:`"
            :options="q.labels"
            type="popup"
          /> -->
        </div>
        <div v-else-if="q.question_type === 'matrix'">
          <!-- <span> {{ q.question }} </span>
          <span> </span> -->
        </div>
        <div v-else-if="q.question_type === 'free_text'">
          <span>
            <van-field
              v-model="q.value.value_free_text"
              autosize
              :label="`${q.question}:`"
              type="textarea"
              border
            />
          </span>
        </div>
        <div v-else-if="q.question_type === 'textbox'">
          <span>
            <van-field
              v-model="q.value.value_text"
              :label="`${q.question}:`"
              type="text"
              border
            />
          </span>
        </div>
        <div v-else-if="q.question_type === 'numerical_box'">
          <span>
            <FieldNumber
              v-model="q.value.value_number"
              :label="`${q.question}:`"
            />
          </span>
        </div>

        <div v-else-if="q.question_type === 'date'">
          <FieldDatetime
            v-model="q.value.value_date"
            :label="`${q.question}:`"
            type="date"
          />
        </div>

        <div v-else-if="q.question_type === 'datetime'">
          <FieldDatetime
            v-model="q.value.value_datetime"
            :label="`${q.question}:`"
            type="datetime"
          />
        </div>

        <div v-else>
          {{ q }}
        </div>
      </div>

      <van-button size="small" @click.native="handleSubmit"> Ok </van-button>

      <!-- {{ data }} -->
    </div>
  </div>
</template>

<script>
import FieldNumber from '@/components/Field/FieldNumber'
import FieldPicker from '@/components/Field/FieldPicker'
import FieldCheckBox from '@/components/Field/FieldCheckBox'
import FieldDatetime from '@/components/Field/FieldDatetime'

export default {
  name: 'SurveyInput',
  components: { FieldNumber, FieldPicker, FieldCheckBox, FieldDatetime },
  directives: {},
  filters: {},
  props: {},

  data() {
    return {
      //

      birthday: '',
      value1: '',
      value: []
    }
  },
  computed: {
    data: function() {
      return this.$store.state.SurveyInput.dataDict
    }
  },
  async created() {
    const { id } = this.$route.query
    await this.$store.dispatch('SurveyInput/browse_question', { id })
    console.log('question,', this.data)
  },

  methods: {
    async handleGo() {
      //
    },
    async handleSubmit() {
      console.log('handleSubmit', this.data)
      this.$store.dispatch('SurveyInput/write_question', this.data)
      // console.log('handleSubmit 2', this.data)
      const { id } = this.$route.query
      this.$router.replace({
        path: '/consult/survey-input',
        query: { id }
      })
    }
  }
}
</script>

<style type="text/css"></style>
